<template>
	<scroll-view scroll-y @scrolltolower="scrolltolower" @scroll="scrollChange" :style="{height: `calc(100% - 90rpx - ${CustomBar}px)`}"
	 :scroll-top="scrollTop" :scroll-with-animation="scrollAnimation">
		<view class="cu-card case custom-recommend">
			<block v-for="(item,index) of list" :key="index">
				<view class="cu-item shadow custom-margin">
					<view class="video-cont img-box">
						<!-- <view class="image img-box" @click="showDetail(item.id)"> -->
						<!-- <image :src="item.img" mode="aspectFill" v-if="item.img"/> -->

						<video controls object-fit="contain" :show-mute-btn="true" :enable-play-gesture="true" :show-center-play-btn="false"
						 :poster="item.img" :src="item.video_url" :id="`video${item.id}`" style="width:100%;height: 390rpx;" @error="videoError"
						  :data-index="index" v-if="item.id===playId" :autoplay="true" />
						
						<view @click="handlePlay(index,item.id)" v-else>
							<view class="img-mask"></view>
							<view class="img-box-play">
								<image src="/static/images/play-01.png" mode="widthFix" style="width:100%;height:100%"></image>
							</view>
							<image :src="item.img" mode="aspectFit" style="width:100%;height: 390rpx;" />
						</view>
						<view class="video-title wes-1">
							<text>{{item.title}}</text>
						</view>
						
						<view class="video-info" v-if="item.isShowBtn">
							<view class="video-info-view">
								<image src="@/static/icons/view.png" style="width:36rpx;height:30rpx"></image>
								<text style="margin-left:10rpx">{{item.views_count}}</text>
							</view>
							<view class="video-info-duration">
								<text>{{item.duration}}</text>
							</view>
						</view>
					</view>
					<view class="padding padding-bottom-lg bg-white flex justify-between align-center" style="height: 150rpx;">
						<view class="flex align-center">
							<image class="cu-avatar round lg custom-avatar margin-right-xs" :src="item.avatar" @click="showInfo(item.user_id)" />
							<view class="flex align-center">
								<view class="margin-right-sm user-name" @click="showInfo(item.user_id)">{{item.nickname}}</view>
								<button class="cu-btn round custom-btn-follow">
									<view @click="handleUnAttention(item.user_id,index)" v-if="!!item.is_attention">
										取消关注
									</view>
									<view @click="handleAttention(item.user_id,index)" v-else>
										<text class="cuIcon-add" />关注
									</view>
								</button>
							</view>
						</view>
						<view class="bottom-right flex justify-between align-center">
							<view class="flex flex-direction align-center" @click="showDetail(item.id)">
								<button class="cu-btn custom-share-btn">
									<image src="/static/images/info-01.png" style="width:44rpx;height:44rpx"></image>
								</button>
								<view class="text-xs text-666">{{item.comments_count}}</view>
							</view>
							<view class="flex flex-direction align-center" @click="createPoster(item,index)">
								<button class="cu-btn custom-share-btn">
									<image src="/static/images/WeChat-friend-01.png" style="width:44rpx;height:44rpx" />
								</button>
								<view class="text-xs text-666">{{item.share_wecircle_num}}</view>
							</view>
							<view class="flex flex-direction align-center">
								<button class="cu-btn custom-share-btn" open-type="share" :data-info="item" @click="handleShare(item.id,index)">
									<image src="/static/images/WeChat-01.png" style="width:44rpx;height:44rpx" />
								</button>
								<view class="text-xs text-666">{{item.share_wechat_num}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</scroll-view>

</template>

<script>
	import HVideo from "@/components/HVideo"
	export default {
		props: {
			TabCur: {
				type: [String, Number],
				default: 0
			},
			tabList: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				list: [],
				isMore: false,
				query: {},
				posterData: {},
				canvasFlag: true,
				playId: "",
				playVideo: null,
				scrollTop: 0,
				scrollAnimation: true,
				lastScrollY: 0
			}
		},
		components: {
			HVideo
		},
		methods: {
			showInfo(id) {
				this.$h.router.push({
					path: '/pages/my/my',
					params: {
						id
					}
				})
			},
			scrollChange(e) {
				this.lastScrollY = e.detail.scrollTop;
			},
			scrollToTop() {
				this.scrollAnimation = false; //是否有过度效果
				this.scrollTop = this.lastScrollY
				this.$nextTick(function() {
					this.scrollTop = 0;
				})
			},
			async getRecommendList() {
				let {
					data
				} = await this.waitingLoading(this.$h.api.videoModel.getSearch)(this.query)
				this.isMore = data.data.length === 10
				if (this.query.page === 1) {
					let list = data.data.map(item => ({
						...item,
						isShowBtn: true
					}))
					this.list = list
				} else {
					let list = data.data.map(item => ({
						...item,
						isShowBtn: true
					}))
					this.list = [...this.list, ...list]
				}
			},
			//关注或取消关注之后，刷新页面完成所有替换
			async refreshList(){
				let query={
					...this.query
				}
				query.page=1
				query.size=this.list.length
				let {
					data
				} = await this.waitingLoading(this.$h.api.videoModel.getSearch)(query)
				this.isMore = data.data.length%10===0
				let list = data.data.map(item => ({
					...item,
					isShowBtn: true
				}))
				this.list = [...list]
			},
			async handleAttention(attention_user_id, index) {
				let query = {
					attention_user_id
				}
				let {
					code
				} = await this.$h.api.userModel.postLike(query)
				if (code === 1) {
					this.refreshList()
				}
			},
			async handleUnAttention(attention_user_id, index) {
				let query = {
					attention_user_id
				}
				let {
					code
				} = await this.$h.api.userModel.postUnLike(query)
				if (code === 1) {
					this.refreshList()
				}
			},
			showDetail(id) {
				this.$h.router.push({
					path: "/pages/video/videoDetail",
					params: {
						id,
						type: "comment"
					}
				})
			},
			scrolltolower() {
				if (this.isMore) {
					let page = this.query.page
					this.$set(this.query, 'page', ++page)
					this.getRecommendList()
				}
			},
			//生成海报
			async createPoster(item,index) {
				let query = {
					video_id: item.id,
					share_type: "wecircle"
				}
				let {code}=await this.$h.api.videoModel.postShareVideo(query)
				if(code===1){
					this.$set(this.list,index,{
						...this.list[index],
						share_wecircle_num:++this.list[index].share_wecircle_num
					})
				}
				this.$emit("createPoster", item)
			},
			videoError(err) {
				console.log(err)
			},
			async handlePlay(index, id) {
				this.playId=id
				this.$set(this.list, index, {
					...this.list[index],
					isShowBtn: false
				})
				//观看人数+1
				let query = {
					video_id: this.list[index].id
				}
				await this.$h.api.videoModel.postViewVideo(query)
			},
			handlePause(e) {

			},
			async handleShare(id,index){
				let query = {
					video_id: id,
					share_type: "wechat"
				}
				let {code}=await this.$h.api.videoModel.postShareVideo(query)
				if(code===1){
					this.$set(this.list,index,{
						...this.list[index],
						share_wechat_num:++this.list[index].share_wechat_num
					})
				}
			}
		},
		watch: {
			TabCur(newVal) {
				if (newVal > 0) {
					this.scrollToTop()
					if (+newVal === 1) {
						this.query = {
							is_recommend: 1,
							page: 1,
							size: 10,
							type:2
						}
					} else {
						this.query = {
							category_id: this.tabList[newVal].id,
							page: 1,
							size: 10,
							type:2
						}
					}
					this.playId=""
					this.list = [] //一定要先清空列表，否则会造成视频的id错误
					this.getRecommendList()
				}
			},
			tabList: {
				handler(newVal) {
					this.tabList = newVal
				},
				deep: true
			}
		},
		created() {
			if (+this.TabCur === 1) {
				this.query = {
					is_recommend: 1,
					page: 1,
					size: 10
				}
			} else {
				this.query = {
					category_id: this.tabList[this.TabCur].id,
					page: 1,
					size: 10
				}
			}
			this.getRecommendList()
		},

	}
</script>

<style lang="scss" scoped>
	/* 推荐 开始 */
	.cu-card.custom-recommend {
		.cu-item {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}

		.video-cont {
			// height: 400rpx;
			height: 390rpx;
			position: relative;
		}

		.img-mask {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			z-index: 9;
			background: rgba(0, 0, 0, 0.2)
		}

		.img-box-play {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			z-index: 10;
		}

		.video-title {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding: 10rpx 20rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			line-height: 50rpx;
			z-index: 20;
		}

		.video-info {
			position: absolute;
			right: 0;
			bottom: 0;
			padding: 10rpx 20rpx;
			color: #fff;
			display: flex;
			justify-content: flex-end;
			z-index: 20;

			%common {
				background: rgba(0, 0, 0, 0.1);
				padding: 10rpx;
				border-radius: 8rpx;
			}

			&-view {
				display: flex;
				align-items: center;
				@extend %common;
			}

			&-duration {
				@extend %common;
				margin-left: 10rpx;
			}
		}

		.cu-avatar.custom-avatar {
			width: 80rpx;
			height: 80rpx;
		}

		.user-name {
			color: $textColor;
		}

		.cu-btn.custom-share-btn {
			width: 44rpx;
			height: 44rpx;
			padding: 0;
			background-color: rgba(0, 0, 0, 0);
			margin-bottom: 8rpx;
		}

		.bottom-right {
			width: 200rpx;
		}
	}
</style>
